<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卖座电影</title>
    <link rel="stylesheet" type="text/css" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/swiper.css">
    
</head>

<body>
    <div id="box">
        <header id="header">
            <nav class="nav">
                <h1 class="h1">
                    <router-link to="/home/navLeft">
                        <div class="iconfont icon-category maizuo-left"></div>
                        <div class="maizuo">卖座电影</div>
                    </router-link>
                </h1>
                <div class="right">
                    <a class="city">
                        <span>深圳</span>
                        <i class="iconfont icon-down"></i>
                    </a>
                    <a class="user">
                        <i class="iconfont icon-zhanghu"></i>
                    </a>
                </div>
            </nav>
        </header>
        <router-view></router-view>   
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/vue-resource.min.js"></script>

    <!--主页块-->
    <template id="home">
       
        <section>
            <!--------------------轮播图---------------------->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in lunboList">
                        <a :href="item.url">
                            <div>
                                <img v-bind:src="item.imageUrl" alt="">
                            </div>
                        </a>
                    </div>
                </div>
            
            </div>
            <!--------------------------------ul li列表------------------------>
            <div class="ul-list">
                <ul>
                    <li v-for="item in nowList">

                            <router-link v-bind:to="{name:'love',params:{'id':item.id}}">
                                <img v-bind:src="item.cover.origin" alt="">
                                <div class="ul-list-top">
                                    <div class="ul-list-left">
                                        <div>
                                            <p>{{item.name}}</p>
                                            <p>{{item.cinemaCount}}家影院上映{{item.watchCount}}人购票</p>
                                        </div>
                                    </div>
                                    <div class="ul-list-right">
                                        {{item.grade}}
                                    </div>
                                </div>
                            </router-link>

                       
                    </li>
                    
                </ul>
                <div class="div-buttom">
                    更多热映电影
                </div>
            </div>
            <!---------------------------即将上映------------------------------>
            <div class="jjsy-box">
                    <hr />
                <div class="jjsy-title">
            
                    即将上映
                </div>
                <div class="jjsy-xia">
                    <ul>
                        <li v-for="item in tomList">
                            <a>
                                <img v-bind:src="item.cover.origin" alt="">
                                <div class="jjsy-p">
                                    <div class="jj-1">{{item.name}}</div>
                                    <div class="jj-2">5月26日上映</div>
                                </div>
                            </a>
                        </li>
                       
                    </ul>
                </div>
            </div>
            
            <div class="footer">
                <a>
                    <div class="footer-1">
                        即将上映更多电影
                    </div>
                </a>
            </div>
            <div class="jian">
                <a href="">
                    <div>
                        <i class="iconfont icon-arrawup"></i>
                    </div>
                </a>
            </div>
            <router-view></router-view>
        </section>
         
    </template>
    <!--左侧导航块-->
    <template id="navLeft">
            <div class="zhe">
                <div class="nav-box">
                    <!--<h1>我是主页</h1>-->
                    <!--<router-link to='/detail'>去详情页</router-link>-->
                    <ul>
                        <li><router-link class="aaa" to='/'><span>首页</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/yingpian'><span>影片</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/yingyuan'><span>影院</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/shang'><span>商城</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/yanchu'><span>演出</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/my'><span>我的</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/maizuo'><span>卖座卡</span><i>&gt;</i></router-link></li>
                    </ul>
                </div>
            </div>   
    </template>
    <!--详情页面-->
    <template id="detail">
        <div class="yingpian1">
            <div class="headertop">
                <!--这里是二级导航-->
                  <router-link class="abc" to="">
                        <div class="r-left">
                            正在热映
                        </div>
                    </router-link>
                    <router-link  class="abc" to="">
                        <div class="r-right">
                            即将上映
                        </div>
                    </router-link>
             </div>
             <!--对于影片的介绍-->
             <div class="con">
                 <ul>
                     <li v-for="item in newList">
                         <router-link class="con-a" to="">
                                <div class="a-left">
                                    <img v-bind:src="item.cover.origin" alt="">
                                </div>
                                <div class="a-right">
                                    <p class="p-1">{{item.name}}<span>{{item.grade}}</span><b>&gt;</b></p>
                                    <p class="p-2">{{item.intro}}</p>
                                    <p class="p-3"><span>{{item.cinemaCount}}</span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{item.watchCount}}</span>人购票</p>
                                </div>
                         </router-link>
                     </li>
                 </ul>
             </div>
        </div>
    </template>
    <!--//详情页面2   ==》》  影片的详细介绍-->
    <template id="detailone">
        
            <div class="last-detail">
                <!--图片-->
                <div class="last-img">
                    <img src="https://pic.maizuo.com/usr/movie/d0094473056fec9ba2796be10ac1eb1c.jpg" alt="">
                </div>
                <div class="last-bottom">
                    <!--简介-->
                    <div class="last-1">影片简介{{$route.params.id}}</div>
                    <div class="last-2">
                        <span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
                        <span>艾斯蓬。山德伯格</span>
                    </div>
                    <div class="last-2">
                        <span>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
                        <span>月黄褐斑才|你dsfkgbdfkgjdskfgdfgh事件是|爱吃那漫长</span>
                    </div>
                    <div class="last-2">
                        <span>地区语言：</span>
                        <span>美国 澳大利亚（英语）</span>
                    </div>
                    <div class="last-2">
                        <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span>
                        <span>动作气坏毛线</span>
                    </div>
                    <div class="last-2">
                        <span>上映日期</span>
                        <span>5月26日上映</span>
                    </div>
                    <!--影片叙述-->
                    <div class="last-last">暗示健康哈时间哈时间哈舒服哈舒服哈市手机号卡时间哈时间开会</div>
                </div>

            </div>
        
    </template>


    <script>
        //1. 先定义好组件
        var Home = {
            template:'#home',
            data: function() {
                return {
                    lunboList:[],
                    nowList:[],
                    tomList:[]
                }
            },
            mounted:function(){
                //这是轮播图的
                var url = 'http://localhost:3000/lunbo?time='+ new Date().getTime();
                this.$http.get(url)
                .then(function(res){
                    // console.log(res);
                    this.lunboList = res.body.data.billboards;
                })
                    //这是正在热映的
                var url = 'http://localhost:3000/reying?time='+new Date().getTime();
                this.$http.get(url)
                .then(function(res){
                        //console.log(res);
                        this.nowList = res.body.data.films;
                })
                //这是即将上映的
                var url = 'http://localhost:3000/jj?time='+new Date().getTime();
                this.$http.get(url)
                .then(function(res){
                        
                        this.tomList = res.body.data.films;
                })


                setTimeout(function(){
                            var mySwiper = new Swiper ('.swiper-container', {
                    autoplay:2000,
                    loop: true,
                    autoplayDisableOnInteraction:false
                }) 
                },1000)
        
            }
        }
        // 左侧导航条的
        var navLeft = {
            template:'#navLeft',
           
        }
        //影片的详情列表
        var Detail = {
            template:'#detail',
            data:function(){
                return {
                    newList:[],
                }
            },
            mounted:function(){
                var url = 'http://localhost:3000/yingpian';
                var that = this;
                this.$http.get(url)
                .then(function(hhh){
                        // console.log(hhh);
                    that.newList = hhh.body.data.films;
                })
            }
        }
        // 单个影片的详细介绍
        var detailOne = {
            template:'#detailone',
            data:function(){
                return {
                    detailList:[]
                }
            },
            mounted:function(){
                var url = 'http://localhost:3000/xiangqing/?time='+new Date().getTime();
                var that = this;
                this.$http.get(url)
                .then(function(ggg){
                    console.log(ggg);     
                })
            }
        }
        //2. 定义好路由规则  
        var routes = [
            {
                path:'/home',
                component:Home,
                children: [
                    {
                        path:'navLeft',
                        component:navLeft
                    }
                ]
            },
            {
                 // 最后的详情页面
                path:'/detailone/:id',
                name:'love',
                component:detailOne
            },
            {
                // 影片列表详情
                path:'/detail/:name',
                component:Detail
            },
            {
                path:'*',
                redirect:'/home'
            }
        ]
        //3. 实例化一个路由对象
        var router = new VueRouter({
            //将定义好的路由规则写进来
            routes:routes
        })
        //4. 实例化根vue实例
        new Vue({
            el:'#box',
            router:router
        })
      
    </script>

</body>
</html>